<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">体验AnyRender Pro的力量</div>
        <div class="forum-header-content">轻松构思、令人印象深刻的演示和顺利推出产品所需的一切。</div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/login')">注册</div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/index/version/bag.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">完成工作所需的一切</div>
        <div class="threeD-tips">强大的功能</div>
        <div class="threeD-description">
          使用我们直观的交互式功能、AR显示器和大量项目空间来提升您的设计流程。无论您是经验丰富的专业人士还是刚刚起步AnyRenderPro都是您通往令人惊叹的视觉效果的门户，可以展示您的产品设计，并可理解任何概念想法。
        </div>
      </div>
    </section>

    <section class="work-section">
      <div class="container">
        <div class="work-content">
          <div class="work-content-item" v-for="item in workList" :key="item.title">
            <div class="work-content-item-img">
              <img :src="item.img" alt="" />
            </div>
            <div class="work-content-item-title">{{ item.title }}</div>
            <div class="work-content-item-desc">{{ item.desc }}</div>
            <div class="work-content-item-btn">
              <div class="work-content-item-btn-txt" @click="jump(item.path)">{{ item.btn }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">准备好开始你的职业之旅了吗？</div>
        <div class="threeD-description">让你的想法被理解，演讲引人入胜，最终解决方案成功。</div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/login')">注册</div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  let workList = [
    {
      img: "/images/index/version/mode.jpg",
      title: "分享动画和互动体验",
      desc: "做出清晰且有影响力的概念解释。允许观众使用光标与之交互：接收交互式指令、与动画组件互动、打开、展开或更改颜色。发送链接或使用一个链接轻松嵌入网络，作为活动的一部分。",
      btn: "了解更多关于互动和动画的信息",
      path: "/seek/interact",
    },
    {
      img: "/images/index/version/phone.jpg",
      title: "利用增强现实的力量",
      desc: "您不需要成为开发人员来构建AR体验或掌握所有新的增强现实标准。AnyRender使其保持最新状态，并使其易于生成和共享。使用链接或二维码直接从您的网站或演示文稿中打开AR。",
      btn: "了解更多关于AR的信息",
      path: "/seek/ar",
    },
    {
      img: "/images/index/version/Tshirt.jpg",
      title: "展示可配置的变体",
      desc: "构建和共享交互式产品配置器。无代码！只需点击几下即可拖放UI元素、构建模块和更新菜单。让您的受众查看和互动来自链接或嵌入的内容。在设计审批阶段或作为电子商务的最终嵌入中的绝佳解决方案。",
      btn: "了解更多关于配置器的信息",
      path: "/seek/3DConfig",
    },
  ];

  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        width: 50%;
        text-align: center;
        font-size: 16px;
        color: #000;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
      }
    }
  }

  .find-btn {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 8px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
      }
    }
  }

  .threeD-section {
    padding: 40px 0;
    color: #000;
    text-align: center;
    .container {
      .threeD-title {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 4px;
      }
      .threeD-tips {
        font-size: 22px;
        margin: 20px auto;
      }
      .threeD-description {
        width: 90%;
        margin: 15px auto;
        font-size: 16px;
        color: #5c5c5c;
      }
      .find-btn-txt {
        color: #703ffa;
        background-color: transparent;
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-title {
          font-size: 36px;
          letter-spacing: 3px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 20px auto;
        }
        .threeD-description {
          font-size: 16px;
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-title {
          font-size: 32px;
          letter-spacing: 2px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 18px auto;
        }
        .threeD-description {
          width: 100%;
          font-size: 16px;
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-title {
          font-size: 28px;
        }
        .threeD-tips {
          font-size: 16px;
          margin: 14px auto;
        }
        .threeD-description {
          font-size: 14px;
        }
      }
    }
  }

  .work-section {
    padding: 40px 0;
    .container {
      .work-content {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        .work-content-item {
          width: calc(33.33% - 40px);
          .work-content-item-img {
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            object-fit: cover;
            box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
          }
          .work-content-item-title {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 30px;
          }
          .work-content-item-desc {
            font-size: 16px;
            color: #5c5c5c;
            margin-bottom: 20px;
          }
          .work-content-item-btn {
            .work-content-item-btn-txt {
              display: inline-block;
              text-align: center;
              padding: 8px 20px;
              background-color: transparent;
              min-width: 60px;
              font-size: 16px;
              border-radius: 6px;
              color: #703ffa;
              border: 1px solid #703ffa;
              cursor: pointer;
            }
          }
        }
      }
    }
    // 响应式 大屏幕
    @media (max-width: $breakpoint-large-desktop) {
      .container {
        .work-content {
          gap: 30px;
          .work-content-item {
            width: calc(33.33% - 30px);

            .work-content-item-btn {
              .work-content-item-btn-txt {
                padding: 8px 16px;
              }
            }
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .work-content {
          gap: 30px;
          flex-wrap: wrap;
          .work-content-item {
            width: 100%;
            .work-content-item-img {
              margin-bottom: 20px;
            }
            .work-content-item-title {
              font-size: 24px;
              margin-bottom: 30px;
            }
            .work-content-item-desc {
              font-size: 16px;
              margin-bottom: 20px;
            }
            .work-content-item-btn {
              .work-content-item-btn-txt {
                padding: 8px 16px;
                min-width: 60px;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
</style>
